<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
    grid-template-rows: [c1] 100px [c2] 100px [c3] 100px [c4];
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .item1 {
    grid-column-start: a2;
    grid-column-end: a4;
    grid-row-start: c2;
    grid-row-end: c3;
    background-color: pink;
  }
  .item2 {
    grid-column-start: a1;
    grid-column-end: a4;
    grid-row-start: c1;
    background-color: skyblue;
  }
  .item3 {
    grid-row-start: c2;
    grid-row-end: c4;
    background-color: khaki;
  }
  </style>
<body>
    <!-- 
        TIP
        我们可以通过指定 gird 项目四个边框分别定位在哪根网格线上，来确定 grid 项目的位置。

        属性	说明
        grid-column-start	项目左边框所在的垂直网格线
        grid-column-end	    项目右边框所在的垂直网格线
        grid-row-start	    项目上边框所在的水平网格线
        grid-row-end	    项目下边框所在的水平网格线

        当项目只指定了以上 4 个属性中的一个，则其它未指定的会采用默认位置,并且一个项目默认只占一个单元格。
        项目的默认位置，由 grid-auto-flow 属性决定
        如果值为 row，则会 “先行后列” 进行排列
        如果值为 column，则会 “先列后行” 进行排列
        row dense 表示 “先行后列”，并且尽可能紧密填满，尽量不出现空格。
        column dense 表示 "先列后行"，并且尽量填满空格
    -->

    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
      </div>
</body>
</html>